<script setup lang="ts">
import { ref } from 'vue';
import type { OnPage } from '@/composables/useList';
import { useList } from '@/composables/useList';
import { zhaoshangInfo } from '@/common/api/attractInvestment';
import tag1 from '@/assets/images/attractInvestment/tag_1.png';

/**
 * 招商中心统计数据
 */
const seg1 = ref<Record<string, string> | undefined>({});

const server: OnPage = async (listConfig) => {
  const res = await zhaoshangInfo({ ...listConfig });
  const { list, data } = res.result;
  seg1.value = data?.seg1;
  return list;
};

const { list, loading, finished, error, onLoad } = useList(server);
</script>
<template>
  <div>
    <div class="border-t border-[#EAEAEA] p-3" v-if="seg1">
      <div class="relative bg-[#F6F7F8] rounded-lg pb-5 pt-11">
        <div class="flex items-center">
          <div
            class="flex flex-col items-center flex-1"
            v-for="([key, value], index) in Object.entries(seg1)"
            :key="index"
          >
            <span class="font-medium">{{ value }}</span>
            <span class="text-xs text-[#7A7A7A] mt-1">{{ key }}</span>
          </div>
        </div>
        <div
          class="text-white text-xs bg-contain bg-no-repeat w-[98px] leading-[24px] pl-2 absolute top-0 left-0"
          :style="{ backgroundImage: `url(${tag1})` }"
        >
          我的招商数据
        </div>
      </div>
    </div>
    <van-list
      v-model:loading="loading"
      v-model:error="error"
      :finished="finished"
      finished-text="没有更多了"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <div class="px-3">
        <div class="border-t border-[#EAEAEA] text-xs text-[#7A7A7A] py-3">我的好友招商数据</div>
        <div class="bg-[#F6F7F8] rounded-lg p-3 mb-2" v-for="item in list" :key="item.nickname">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <van-image
                width="47"
                height="47"
                radius="8"
                lazy-load
                fit="cover"
                :src="item.headimg + '?x-oss-process=image/resize,m_fixed,h_94,w_94'"
              />
              <span class="text-[13px] ml-3">{{ item.nickname }}</span>
            </div>
            <div class="flex items-center text-[#EC2D69]">
              <span class="text-sm font-medium">{{ item.level }}</span>
              <!-- <span class="text-xs">区域总量</span>
              <span class="text-sm font-medium">106.58</span> -->
            </div>
          </div>
          <!-- <div class="flex items-center justify-between pt-2">
            <div class="flex items-center text-xs">
              <span class="text-[#999999]">自己转入</span>
              <span class="font-medium">2985.20</span>
            </div>
            <div class="flex items-center text-xs">
              <span class="text-[#999999]">自己转入</span>
              <span class="font-medium">2985.20</span>
            </div>
            <div class="flex items-center text-xs">
              <span class="text-[#999999]">自己转入</span>
              <span class="font-medium">2985.20</span>
            </div>
          </div> -->
        </div>
      </div>
    </van-list>
  </div>
</template>
